<template>
    <div class="qilin-headerNav qilin-py-1 qilin-px-2">
        <el-row>
            <el-col :span="12" class="qilin-headerNav-logo">
                <img src="@/assets/images/Qilin-web.png" alt="">
                <span class="qilin-ml-1">EDGQilin全栈管理系统</span>
                <i class="el-icon-s-fold" @click="collapseNav()"></i>
            </el-col>
            <el-col :span="12" class="qilin-headerNav-user qilin-mt-1">
                <div class="qilin-headerNav-user-box">
                    <img :src="
                        userInfo.image == 'moren' ? 
                        require('@/assets/images/yunyun3.jpg') : 
                        uploadImageUrl+userInfo.image " 
                        alt="图片资源已删除"
                    >
                    <div class="qilin-headerNav-user-box-text qilin-py-0 qilin-pr-1 qilin-pl-2">
                        <p>欢迎</p>
                        <p class="qilin-mt-1">{{userInfo.name}}</p>
                    </div>
                    <span class="qilin-headerNav-user-box-arrow">
                        <el-dropdown trigger="click" @command="handleCommand">
                            <span class="el-dropdown-link">
                                <i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="info">个人信息</el-dropdown-item>
                                <el-dropdown-item command="forgetPassword"
                                    :disabled="userInfo.identify !== 'manager' "
                                >修改密码</el-dropdown-item>
                                <el-dropdown-item command="exit">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    inject:["uploadImageUrl"],
    data(){
        return {
            isCollapse:false
        }
    },
    computed:{
        userInfo(){
            // console.log(this.$store.getters.userInfo);
            return this.$store.getters.userInfo;
        }
    },
    methods:{
        //点击下拉菜单对应事件监听
        handleCommand(val){
            // console.log(val);
            switch(val){
                case "info":
                    this.showUserInfo();
                    break;
                case "exit":
                    this.exit();
                    break;
                case "forgetPassword":
                    this.$router.push("/forget");
                    break;
            };
        },
        //点击个人信息事件监听
        showUserInfo(){
            // console.log("个人信息");
            if(this.$route.path !== "/info/message"){
                this.$router.push({
                    path:"/info/message"
                });
            };
        },
        //点击退出事件监听
        exit(){
            this.$confirm("确认退出系统吗？","温馨提示",{
                showCancelButton:true,
                closeOnClickModal:false,
                type:"warning"
            }).then(()=>{
                //清除token
                localStorage.removeItem("qilinToken");
                //重置Vux中state信息
                this.$store.dispatch("clearUserInfo");
                //回到登录页面
                this.$router.push("/login");
            }).catch(()=>{
                console.log("取消退出操作");
            });
        },
        // 点击图标收缩导航栏事件监听
        collapseNav(){
            // this.$root.$emit("update:collapse",this.isCollapse);
            const isCollapse=this.$store.getters["home/getIsCollapse"];
            this.$store.commit("home/set_isCollapse",!isCollapse);
            this.$store.commit("home/set_width",!isCollapse?4.571:14.286);
        }
    },
    mounted(){
        // console.log(this.$store);
        // this.$store.commit("home/set_isCollapse",false);
    }
}
</script>
<style lang="less" scoped>
.qilin-headerNav{
    .EDGQilinWH(100%,4.286rem);
    min-width:42.857rem;
    background-color:@color-theme-common-dark;
    color:#fff;
    border-bottom:1px solid @color-theme-common-light;
    font-size:@size-text-default !important;
    >.el-row{
        height:100%;
        >.qilin-headerNav-logo{
            text-align:left;
            .EDGQilinFlex(flex-start);
            >img{
                .EDGQilinWH(@rem50,auto);
                border-radius:@radius-circle;
            }
            >span{
                font-weight:bolder;
                font-size:@size-text-large;
            }
            >i{
                font-size:@size-text-large;
                margin-left:@rem5;
            }
        }
        >.qilin-headerNav-user{
            float:right;
            >.qilin-headerNav-user-box{
                .EDGQilinFlex(flex-end);
                >img{
                    .EDGQilinWH(@rem40,@rem40);
                    border-radius:@radius-circle;
                }
                >.qilin-headerNav-user-box-text{
                    text-align:center;
                    >p:last-child{
                        color:#fff;
                        font-weight:bolder;
                    }
                }
                >.qilin-headerNav-user-box-arrow{
                    >.el-dropdown{
                        color:#fff;
                    }
                }
            }
        }
    }
}
</style>